<template>
  <div class="con">
    <div class="list_title">
      <div class="text">平时考核得分</div>
      <div class="btn" v-if="infoData.rankType !== '2'">
        <el-button type="primary" plain="" size="mini" @click="selectUser">个人考核对比</el-button>
      </div>
    </div>
    <div class="charts_con">
      <div class="charts" id="year_chart">
        <div class="no_data" v-if="serveData.length === 0">
          <empty></empty>
        </div>
      </div>
    </div>
    <PersonnelSelect
      @close="userClose"
      :showStatus="selectUserShow"
      @commit="commit"
      :idArr="[dataObj.userId]"
      :dataObj="dataObj"></PersonnelSelect>
  </div>
</template>

<script>
import { getlistYearAssessTotalScore } from '@apis/api-intelligent.js'
import PersonnelSelect from './PersonnelSelect.vue'
import Echarts from '@libs/echarts'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'FileAssess',
  components: { PersonnelSelect },
  props: {
    dataObj: {
      type: Object,
      default: () => {},
    },
    infoData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      Xdata: [],
      serveData: [],
      selectUserShow: false,
    }
  },
  computed: {},
  watch: {
    dataObj: {
      handler(news) {
        if (news.year && news.userId) {
          this.pageInit()
        }
      },
      deep: true,
    },
  },
  created() {},

  mounted() {
    if (this.dataObj.userId && this.dataObj.year) {
      this.pageInit()
    }
  },
  methods: {
    async pageInit() {
      const { data } = await getlistYearAssessTotalScore({
        userId: this.dataObj.userId,
        year: this.dataObj.year,
      })
      const Xdata = []
      const serveData = []
      data.forEach(item => {
        Xdata.push(item.name)
        serveData.push(item.totalScore)
      })
      this.Xdata = Xdata
      this.serveData = serveData
      this.drawChart()
    },
    drawChart() {
      const myChart = Echarts.init(document.getElementById('year_chart'))
      const option = {
        xAxis: {
          type: 'category',
          data: this.Xdata,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.serveData,
            type: 'bar',
            itemStyle: {
              color: '#2b78f1',
            },
            label: {
              show: true,
              position: 'top',
            },
            barWidth: 30,
          },
        ],
      }
      myChart.setOption(option)
    },
    selectUser() {
      this.selectUserShow = true
    },
    userClose() {
      this.selectUserShow = false
    },
    commit(data) {
      this.userClose()
      this.$router.push({
        name: 'PSKH_JXXIAO_PORTRAIT_CONTRAST',
        params: {
          info: JSON.stringify(data),
          timeInfo: JSON.stringify({
            year: this.dataObj.year,
            quarter: this.dataObj.quarter,
          }),
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import './title.scss';

.con {
  margin-top: 20px;
  margin-bottom: 10px;
  .btn {
    margin-right: 20px;
  }

  .charts_con {
    display: flex;
    justify-content: center;
    align-items: center;
    // background-color: #f2f2f2;
    border: 1px solid #ccc;
    .charts {
      height: 300px;
      width: 60%;
    }
  }
}
</style>
